<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件</title>
		<script src="js/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<hello-vue :content="content"></hello-vue>
		</div>
		
		<script type="text/javascript">
			//驼峰式命名组件，不能在标签式中使用，只能在template字符串中使用
			//如buttonCounter不能在上面div中使用<buttonCounter>
			Vue.component("button-counter",{
				data:function(){
					return{
						count:0
					}
				},
				// template:'<button @click="count++">点击了{{count}}次</button>',
				template:'<button @click="sum">点击了{{count}}次</button>',
				methods:{
					sum:function(){
						this.count++
					}
				},
			})
			
			//局部组件注册
			var helloVue ={
				//父组件向子组件传值
				//这里如果使用驼峰式，在html属性中必须改为中划线形式，但是template字符串中可使用驼峰式
				props:["content"],  //只允许父组件向子组件传递
				data:function(){
					return{
						msg:"hello vue"
					}
				},
				template:'<div>{{msg+"--"+content}}</div>'
			};
			var vm = new Vue({
				el:"#app",
				data:{
					content:"这是父组件值"
				},
				components:{
					"hello-vue":helloVue,
				}
			}) 
		</script>
	</body>
</html>
